<template>
	<view>
		<view class="call">
				<!-- block没有任何的实际意义，只是包裹作用 -->
			<block v-for="item in list" :key="item.id">
				<view class="box01" @click="messageDetail(item.id)">
					<view class="messageBox">
						<view class="new" v-if="item.isNew"></view>
						<text>{{ item.text }}</text>
					</view>
					<view class="time">{{ item.time }}</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						id: 1,
						text: "这是一条系统消息，就是系统消息啊",
						time: "03-17",
						isNew: true
					},
					{
						id: 2,
						text: "这是一条系统消息，就是系统消息啊",
						time: "03-17",
						isNew: true
					},
					{
						id: 3,
						text: "这是一条系统消息，就是系统消息啊",
						time: "03-17",
						isNew: true
					},
					{
						id: 4,
						text: "这是一条系统消息，就是系统消息啊",
						time: "03-17",
						isNew: true
					}
				]
			}
		},
		methods: {
			messageDetail (id) {
				uni.navigateTo({
					url: "../message_detail/message_detail?id=" + id,
				})
				const i = this.list.findIndex(x => x.id === id)
				if (i === -1) {
					return false
				}
				this.list[i].isNew = false
			}
		}
	}
</script>

<style lang="scss">
	.call {
		padding-left: 32rpx;
		.box01 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width:718rpx;
			height:98rpx;
			background:rgba(255,255,255,1);
			box-shadow:0rpx -1rpx 0rpx 0rpx rgba(237,238,240,1);
			.messageBox {
				display: flex;
				align-items: center;
				text {
					width:480rpx;
					height:42rpx;
					font-size:30rpx;
					font-family:PingFangSC-Regular,PingFang SC;
					font-weight:400;
					color:rgba(110,119,126,1);
					line-height:42rpx;
				}
				.new {
					width:16rpx;
					height:16rpx;
					border-radius: 50%;
					background:rgba(249,47,72,1);
					margin-right: 16rpx;
				}
			}
			.time {
				width:68rpx;
				height:32rpx;
				font-size:22rpx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(32,34,46,1);
				line-height:32rpx;
				margin-right: 30rpx;
			}
		}
	}
</style>
